<template>
  <div class="StoreTaskTracking">
    <div class="head">
      <div class="storeSelect" style="display: flex; align-items: center">
        <select-store @handleChange="optionChange" />日期：
        <el-date-picker
          v-model="selectDate"
          type="date"
          placeholder="选择日期"
          size="small"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
        ></el-date-picker>
        <el-select v-model="isWarnItem" placeholder="请选择有无预警" class="isWarnSelect" @change="changeOptions">
          <el-option
            v-for="item in isWarnoptions"
            :key="item"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
        <el-button style="margin-left: 20px" type="primary" round @click="queryData" size="mini">查询</el-button>
      </div>
    </div>

    <div class="table">
      <el-table size="small" :data="tableData" border>
        <el-table-column label="执行时间" prop="performTime" align="center" ></el-table-column>
        <el-table-column label="任务名称" prop="taskName" align="center"></el-table-column>
        <el-table-column label="门店" prop="orgName" align="center"></el-table-column>
        <el-table-column label="是否有预警" prop="isWarn" align="center" :formatter="formatStatus"></el-table-column>
        <el-table-column label="执行结果" prop="performResult" align="center" :formatter="forStatus"></el-table-column>
        <el-table-column label="备注" prop="description" align="center" ></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="goDetail(scope.row)" round v-if="scope.row.performResult==1">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="current"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getStoreTaskTrackingData } from "@/api/smartShops";
import selectStore from "../components/selectStore";
export default {
  name: "Index",
  components: { selectStore },
  data() {
    return {
      isWarnoptions:["有预警","无预警"],
      storeName: "",
      selectDate: "",
      options: [],
      tableData: [],
      current: 1,
      size: 10,
      total: 0,
      isWarnItem: "",
      isWarn:""
    };
  },
  methods: {
    changeOptions(val){
      if(val == "有预警"){
        this.isWarn = 1
      }else{
        this.isWarn = 0
      }
      this.getData();
    },
    queryData() {
      this.getData();
    },
    handleSizeChange(size) {
      this.size = size;
      this.getData();
    },
    handleCurrentChange(current) {
      this.current = current;
      this.getData();
    },
    optionChange(val) {
      this.orgSeq = val[val.length - 1];

      this.getData();
    },
    async getData() {
      let{ total, records } = await getStoreTaskTrackingData({
        size: this.size,
        current: this.current,
        condition: {
          orgSeq: this.orgSeq,
          performTime: this.selectDate,
          isWarn: this.isWarn
        }
      });
      this.tableData = records;
      this.total = total;
    },
    goDetail(row) {
      if (row.taskName.indexOf("酒柜巡查") !== -1) {
        this.$router.push({
          path: "/storeTaskTrackingDetail",
          query: { data: { ...row, pageMark: "酒柜" } }
        });
      } else {
        this.$router.push({
          path: "/storeTaskTrackingDetail",
          query: { data: { ...row, pageMark: "工装" } }
        });
      }
    },
    formatStatus(row) {
      let isWarn = row.isWarn;
      if (isWarn == 0) {
        return "无预警";
      }
      if (isWarn == 1) {
        return "有预警";
      }
      return isWarn;
    },
    forStatus(row){
      let performResult = row.performResult;
      if(performResult == 0){
        return "失败";
      }
      if(performResult == 1){
        return "成功";
      }
    }
  },
  created() {
    this.orgSeq = JSON.parse(localStorage.getItem("logininfo"))[
      "orgList"
    ][0].orgSeq;
    this.getData();
  }
};
</script>

<style scoped lang="scss">
.StoreTaskTracking {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .head {
    height: 50px;
    width: 100%;
    font-size: 13px;
    line-height: 50px;
    border-bottom: 1px solid #dcdfe6;

    .el-select {
      margin-right: 10px;
    }
    .isWarnSelect{
      margin-left: 10px;
    }
    .el-date-picker {
      width: 200px;
    }
  }

  .table {
    padding: 10px 0;
    // max-height: calc(100% - 100px);
    width: 100%;
  }

  .paging {
    height: 50px;
    width: 100%;
    line-height: 50px;
  }
}
</style>
